<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/taglibs.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用户角色</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
    <link rel="stylesheet" type="text/css" href="css/easyui.css" />
    <link rel="stylesheet" type="text/css" href="css/icon.css" />
    <link rel="stylesheet" type="text/css" href="css/sys.css" />
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/ipwb.js"></script>
    <script type="text/javascript">
    
       $(function(){
       
         $('#menuUl').tree({
				checkbox: true,
				url: 'systemsettings/showMenuTree.action',
				onClick:function(node){
					$(this).tree('toggle', node.target);
					//alert('you click '+node.text);
				},onContextMenu: function(e, node){
					e.preventDefault();
					$('#menuUl').tree('select', node.target);
				}
		  });
			  
         $("#roleTree").treegrid({onClickRow:function(rowData){//获取单行数据，显示在下方标签内
              
              $("#name").attr("value",rowData.name);
              $("#textarea").attr("value",rowData.roleExp);
          }});
       });
    </script>
  </head>
  
   <body>
   
    <div class="easyui-layout" fit="true">
	  <div region="center" border="false">
	<table id="roleTree" animate="true" striped="true" nowrap="true" rownumbers="true" class="easyui-treegrid" split="true" fit="true"  
	      method="post" url="systemsettings/showRoleTree.action" fitColumns="true" idField="id" treeField="name">
		<thead>
			<tr>
			    <th field="name" width="80">角色名称</th>
				<th field="createTime" width="20"  align="center">创建日期</th>
				<th field="roleExp" width="20" align="center">说明</th>  
				<th field="status" width="15" align="center">状态</th>
			</tr>
		</thead>
	</table>
	</div>
       
     <div region="south" hide="true" border="false" split="true" style="height:240px;">
	  <div class="easyui-tabs" border="false" fit="true" tools="#roleTools">
		<div title="角色信息">
		  <table class="formTable" style="height:40%;width:95%;">
			<tr>
				<td width="50%">
				  <label>角色名称：</label> 
				   <input type="text" name="name" id="name" style="width:40%;"/> 
				</td>
			</tr>
			<tr>
			 <td>
			 <label> 
			        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    描述：&nbsp;&nbsp;&nbsp;&nbsp;</label><textarea id="textarea" name="textarea" style="width:40%;height:40px;"></textarea>
			 <img src="./images/tree_dnd_yes.png">
			 </td>
			</tr>
		</table>  
		</div>
		<div title="权限分配">
		  <ul id="menuUl"></ul>
		</div>
	  </div>
	
	<div id="roleTools" style="border-left:0px;border-top:0px;margin-top: 1px;background:#C7D6DB;">
	   <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true">新建</a>
       <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-Save" plain="true">保存</a>
       <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编缉</a>
       <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
	</div>
	   </div>
	</div>
  </body>
</html>
